<template>
    <div class="orignationLife">
        <Header :bigDataTitle="bigDataTitle" @openMenu="openMenu" @navback="navback"/>
        <div class="menberAge" id="menberAge">
            <div class="select-area">
                <div class="selectCountp ">
                    <!--<b class="ellipicls">-->
                    {{companyName}}
                    <!--</b>-->
                    <!--<span class="iconshuju_icon_xiala iconfont"></span>-->
                    <!--<mu-select  v-model="normal.value" @change="changeValue">-->
                        <!--<mu-option v-for="(item,index) in orgArray" :key="index" :label="item.name" :value="item.id"></mu-option>-->
                    <!--</mu-select>-->
                </div>
                <div class="timer-picker">
                    <span>{{currentTime}}</span><b class="iconfont iconshuju_icon_rili"></b>
                    <mu-date-input v-model="value1" type="month" container="dialog" @change="changeDate" ></mu-date-input>
                </div>
            </div>

            <div class="orignation-wrap" v-show="!noData">
                <div class="orignation-list" :class="{'active':activeIndex==2}">
                    <div id="pic2"></div>
                    <span class="iconshuju_icon_youqie iconfont" @click.stop="activeIndex=0"></span>
                    <div class="tips" >
                        <p v-for="(item,index) in all_class_name_res" :key="index"><span :style="{background:`${initColor[index]}`}"></span>{{item.name}} <b>{{item.value}}({{(item.percentage)*100}}%) </b></p>
                    </div>
                </div>
                <div class="orignation-list2" :class="{'active':activeIndex==0}">
                    <div id="pic3"></div>
                    <div class="tips" >
                        <p v-for="(item,index) in all_meeting_status" :key="index"><span :style="{background:`${initColor[index]}`}"></span>{{item.name}} <b>{{item.value}}({{(item.percentage)*100}}%) </b></p>
                    </div>
                    <span class="iconshuju_icon_zuoqie iconfont" @click.stop="activeIndex=2"></span>
                </div>
            </div>
            <div v-show="noData" class="noData">
                <span>暂无数据</span>
            </div>

        </div>
    </div>
</template>

<script>
    import Header from  '@/views/home/components/header.vue';
    import {formatMonth} from '../utils'
    import {mapState,mapMutations} from 'vuex';
    export default{
        data(){
            return{
                bigDataTitle:'组织生活',
                position: 'right',
                all_class_name_res:[],
                all_meeting_status:[],
                activeIndex:2,
                companyName:'',
                companyId:'',
                value1:'',
                currentTime:'',
                noData:false,
                currentTimeStamp:'',
                normal:{
                    value:''
                }
            }
        },
        computed:{
            ...mapState({
                open:state=>state.initHomeData.open.open,
                initColor:state=>state.initHomeData.initColor,
                orgArray:state=>state.initHomeData.orgArray
            })
        },
        methods:{
            ...mapMutations(['openHomeMenu']),
            navback(){
                this.$router.go(-1);
            },
            openMenu(){
                console.log(123)
                this.openHomeMenu({
                    open:!this.open
                })
            },
            changeValue(e){
                this.orgArray.forEach((item,index)=>{
                    if(item.id==e){
                        this.companyName =item.name;
                        this.companyId =e
                    }
                })
                this.getData(e,this.currentTimeStamp)
            },
            changeDate(e){
                console.log(e)
                this.currentTime =formatMonth(e.getTime());
                this.currentTimeStamp =parseInt(e.getTime()/1000);
                console.log(this.currentTimeStamp)
                this.getData(this.companyId,this.currentTimeStamp)
            },
            pic2(){
                let pic2 =document.getElementById('pic2');
                let myChart = this.$echarts.init(pic2);
                var dataValue=this.all_class_name_res;
                let colorArray=[];
                this.all_class_name_res.forEach((el,index)=>{
                    colorArray.push(this.initColor[index])
                })
                console.log(colorArray);
                console.log(dataValue);
                let  option = {
                    calculable : true,
                    color:colorArray,
                    title: {
                        text: "会议类型",
                        textStyle: {
                            color: '#fff',
                            fontSize: 18,
                        },
                        left: 'center',
                        bottom: '45%',
                        itemGap: 60,
                    },
                    series : [
                        {
                            name:'面积模式',
                            type:'pie',
                            radius :['50%','80%'],
                            center : ['50%', '50%'],
                            align: 'center',
                            top:28,
                            bottom:58,
                            label: {
                                normal: {
                                    position: 'outside',
                                    text:'会议类型',
                                    show:false
                                }
                            },
                            data:this.all_class_name_res
                        }
                    ]
                };
                myChart.setOption(option)
            },
            pic3(){
                let pic3 =document.getElementById('pic3');
                let myChart = this.$echarts.init(pic3);
                var dataValue=this.all_meeting_status;
                let colorArray2=[];
                this.all_class_name_res.forEach((el,index)=>{
                    colorArray2.push(this.initColor[index])
                })
                console.log(colorArray2);
                console.log(dataValue);
                let  option = {
                    title: {
                        text: "会议进度",
                        textStyle: {
                            color: '#fff',
                            fontSize: 18,
                        },
                        left: 'center',
                        bottom: '45%',
                        itemGap: 60,
                    },
                    calculable : true,
                    color:colorArray2,
                    series : [
                        {
                            name:'面积模式',
                            type:'pie',
                            radius :['50%','80%'],
                            center : ['50%', '50%'],
                            align: 'center',
                            top:28,
                            bottom:58,
                            label: {
                                normal: {
                                    position: 'outside',
                                    text:'会议类型',
                                    show:false
                                }
                            },
                            data:this.all_meeting_status
                        }
                    ]
                };
                myChart.setOption(option)
            },
            getData(id,time){
                this.$http.get('app/DataVisualization/meeting',{
                        organization_id:id,
                        time,
                }).then((res)=>{
                    console.log(res)
                    if(res.code=='200'){
                        console.log(Object.keys(res.data).length)
                        if(Object.keys(res.data).length){
                            this.noData =false;
                            this.all_class_name_res =res.data.all_class_name_res;
                            this.all_meeting_status =res.data.all_meeting_status;
                            setTimeout(()=>{
                                this.pic2();
                                this.pic3();
                            },1000)

                        }else{
                            this.noData =true;
                            console.log('nodata')
                        }

                    }
                })
            }
        },
        components:{
            Header
        },
        mounted(){
            if(!Cookies.get('user_71ydj')){
                this.$router.push({
                    path:'/mine'
                })
                return false
            }
            this.$progress.done();
            this.currentTime =formatMonth(+new Date().getTime());
            this.currentTimeStamp =parseInt(+new Date().getTime()/1000);
            console.log(this.currentTimeStamp)
            console.log(this.initColor);
            console.log(JSON.parse(Cookies.get('user_71ydj')).id);
            this.getData(JSON.parse(Cookies.get('user_71ydj')).organization_id,(+new Date().getTime()));
            this.companyName =JSON.parse(Cookies.get('user_71ydj')).organization;
            this.companyId =JSON.parse(Cookies.get('user_71ydj')).organization_id;
        }
    }
</script>
<style lang="scss" scoped="">
    @import '../base2';
    .orignationLife{
        color: white;
        height: 100%;
        min-height: 100vh;
        padding-bottom: 20px;
        .menberAge{
            margin-top: 45px;
            height: 100%;
            .select-area{
                height: 50px;
                margin: 0 -16px;
                .selectCountp,.timer-picker{
                    float: left;
                    width: 50%;
                    height: 100%;
                    vertical-align: top;
                    margin: 0;
                    position: relative;
                    .mu-input{
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        opacity: 0;
                    }
                    b{
                        display: inline-block;
                        /*max-width: 80%;*/
                        vertical-align: top;
                    }
                }
            }
            .orignation-wrap{
                width: 100%;
                height: 641px;
                position: relative;
                overflow: hidden;
                .orignation-list{
                    position: absolute;
                    left: 0;
                    top:0;
                    width: 100%;
                    height: 100%;
                    position: relative;
                    z-index: 1;
                    transform: translateX(-100%);
                    span.iconfont{
                        position: absolute;
                        right: 10px;
                        top: 160px;
                    }
                    &.active{
                        transform: translateX(0);
                        z-index: 22;
                    }
                }
                .orignation-list2{
                    width: 100%;
                    height: 100%;
                    transform: translateX(100%);
                    position: absolute;
                    left: 0;
                    top:0;
                    z-index: -1;
                    span.iconfont{
                        position: absolute;
                        left: 10px;
                        top: 160px;
                    }
                    &.active{
                        transform: translateX(0%);
                        z-index: 22;
                    }
                }

            }
                #pic2,#pic3{
                    height: 333px;
                }
                .tips{
                    p{
                        height: 50px;
                        border-bottom: 1px solid rgba(255,255,255,0.05);
                        font-size: 16px;
                        color: white;
                        font-weight: normal;
                        line-height: 50px;
                        span{
                            display: inline-block;
                            width: 30px;
                            height: 10px;
                            background: #0D65FC;
                            margin-left: 20px;
                            margin-right: 10px;
                        }
                        b{
                            float: right;
                            font-weight: normal;
                        }
                    }
                }
        }
    }
    .noData{
        height: 200px;
        position: relative;
        span{
            position: absolute;
            left: 0;
            top:0;
            right: 0;
            bottom: 0;
            margin: auto;
            font-size: 14px;
            color: white;
            width: 100%;
            height: 30px;
            text-align: center;
        }
    }

</style>